<template>
	<div class="shopcart">
		<div class="content" @click="toggleList">
			<div class="content-left">
				<div class="logo-wrapper">
					<div class="logo" :class="{active:totalCount > 0}">
						<span class="iconcart iconfont">&#xe612;</span>
					</div>
					<div class="num" v-show="totalCount>0">{{totalCount}}</div>
				</div>
				<div class="price" :class="{active:totalCount > 0}">￥{{totalPrice}}</div>
				<div class="desc">另需配送费￥{{deliveprice}}元</div>
			</div>
			<div class="content-right" @click.stop.prevent="handlePayClick">
				<div class="pay" :class="payClass">
					{{payDesc}}
				</div>
			</div>
		</div>
		<div class="ball-container">
			<div class="ball"				
				v-for = "ball in balls"
				v-show="ball.show"
			>				
			</div>
		</div>		
		<fold class="shopcart-list" v-show="listShow">
			<div class="list-header">
				<span class="l-title">购物车</span>
				<span class="l-empty" @click="handleClearClick">清空</span>
			</div>
			<div class="list-content" v-el:list-content>
				<ul>
					<li class="l-food" v-for="food in selectFoods">
						<span class="l-name">{{food.name}}</span>
						<div class="l-price">
							￥{{food.price*food.count}}
						</div>
						<div class="cartcontrol-wrapper">
							<cartcontrol :food="food"></cartcontrol>
						</div>
					</li>
				</ul>
			</div>
		</fold>		
	</div>
	<animates class="list-mask" v-show="listShow" @click = "handleCloseClick">
		
	</animates>
</template>

<script>
	import cartcontrol from 'components/cartcontrol/cartcontrol'
	import fold from '../../common/transition/fold.vue'
	import Bscroll from 'better-scroll'
	import animates from '../../common/transition/transition.vue'
	export default {
		props:{
			deliveprice:{
				type:Number
			},
			minprice:{
				type:Number
			},
			payClass:"",
			selectFoods:{
				type:Array,
				default:function(){
					return []
				}
			}
		},
		components:{
			cartcontrol,
			fold,
			animates
		},
		data:function(){
			return{
				balls:[
					{show:false},
					{show:false},
					{show:false},
					{show:false},
					{show:false},
				],				
				fold:true
			}
		},
		computed:{
			totalPrice:function(){
				var total = 0;
				this.selectFoods.forEach(function(food){
					total += food.price*food.count
				})
				return total
			},
			totalCount:function(){
				var count = 0;
				this.selectFoods.forEach(function(food){
					count += food.count
				})
				return count
			},
			payDesc:function(){			
				if(this.totalPrice === 0){
					this.payClass = ""
					return '还差￥'+ this.deliveprice+'元起送'
				}else if(this.totalPrice < this.minprice){
					this.payClass = "not"
					var deff = this.minprice - this.totalPrice
					return '还差￥'+ deff +'元起送';
				}else{
					this.payClass = "yeah"
					return '去结算';
				}
			},
			listShow:function(){
				if(!this.totalCount){
					this.fold = true
					return false
				}
				var show = !this.fold;
				if(show){
					this.$nextTick(function(){
						var el = this.$els.listContent
						if(!this.scroll){
							this.scroll = new Bscroll(el,{
								click:true
							})
						}else{
							this.scroll.refresh()
						}						
					}.bind(this))
				}
				return show
			}
		},
		methods:{
			toggleList:function(){					
				if(!this.totalCount){
					return;
				}				
				this.fold = !this.fold
				console.log(this.fold)
			},
			handleClearClick:function(){				
				this.selectFoods.forEach(function(food){
					food.count = 0
				})
			},
			handleCloseClick:function(){
				this.fold = true
			},
			handlePayClick:function(){
				if(this.totalPrice < this.minprice){
					return
				}
				console.log("支付")
			}
		}
		
	}
</script>

<style lang="stylus" scoped="scoped">
	@import "../../common/stylus/index.styl"
	.shopcart {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 48px;
		z-index: 50;		
	}
	.content {
		background: #141d27;
		display: flex;
		font-size: 0px;
	}
	.content-left {
		flex: 1;		
	}
	.logo-wrapper {
		position: relative;
		display: inline-block;
		top: -10px;
		margin-left: 12px;
		margin-right: 12px;
		padding: 6px;
		box-sizing: border-box;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		vertical-align: top;
		background: #141d27;
	}
	.logo {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: #2b343c;
		text-align: center;
	}
	.logo.active {
		background:rgb(0,160,220) ;		
	}
	.iconcart {
		color: #82858a;
		font-size: 24px;
		line-height: 44px;
		text-align: center;
	}
	.logo.active .iconcart {
		color: #fff;
	}
	.num {
		position: absolute;
		top: 0px;
		right: 0px;
		min-width: 24px;
		height: 16px;		
		line-height: 16px;
		color: #fff;
		text-align: center;
		background: #ff0000;
		border-radius: 16px;
		font-size: 9px;
		font-weight: 700;
		box-shadow: 0 4px 8px rgba(0,0,0,0.4);
	}
	.price {
		display: inline-block;
		margin-top: 12px;
		padding-right: 12px;
		vertical-align: top;
		line-height: 24px;
		border-right: 1px solid rgba(255,255,255,0.1);
		text-align: center;
		box-sizing: border-box;
		font-size: 16px;
		font-weight: 700;
		color: #82858a;
		
	}
	.price.active {
		color: #fff;
	}
	.desc {
		display: inline-block;
		vertical-align: top;
		margin-top: 12px;
		margin-left: 12px;
		line-height: 24px;
		font-size: 10px;
		color: #82858a;
	}
	.content-right{
		flex:0 0 105px;
		width: 105px;
	}
	.pay {	
		line-height: 48px;
		height: 48px;
		font-size:12px;
		color: #82858a;
		text-align: center;
		font-weight: 700;
		background:#2b333b ;
	}
	.pay.not{
		background: #2b333b;
	}
	.pay.yeah {
		background: #00b43c;
		color: #fff;
	}
	.ball-container {}
	.ball{
		position: fixed;
		width: 16px;
		height: 16px;
		left: 32px;
		bottom: 22px;
		background: #00a0dc;
		z-index: 200;
		border-radius: 50%;
	}
	.shopcart-list {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		z-index: -1;
		transform: translateY(-100%);	
	}
	.list-header {
		height: 40px;
		line-height: 40px;
		padding: 0 18px;
		background: #F3F5F7;
		border-bottom: 1px solid rgba(7,17,27,0.1);
	}
	.l-title {
		float: left;
		font-size: 14px;
		color: rgb(7,17,27);
	}
	.l-empty {
		float: right;
		font-size: 12px;
		color: rgb(0,160,220);
	}
	.list-content {
		padding: 0 18px;
		max-height: 217px;
		background: #fff;
		overflow: hidden;
	}
	.l-food {
		position: relative;
		padding: 12px 0;
		box-sizing: border-box;
		border-1px(rgba(7,17,27,0.1))
	}
	.l-name {
		line-height: 24px;
		font-size: 14px;
		color: rgb(7,17,27);
	}
	.l-price {
		position: absolute;
		right: 90px;
		bottom: 12px;
		line-height: 24px;
		font-size: 14px;
		color: #ff0000;
		font-weight: 700;
	}
	.cartcontrol-wrapper {
		position: absolute;
		right: 0;
		bottom: 6px;
	}
	.list-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.8);
	}
</style>
